<template>
	<div class="easyd-weixin-Box">

		<div class="search_box">
			<span class="screen"></span>
			<input type="text" id="" value="" placeholder="请输入姓名或电话！" />
			<span class="search">搜索</span>
		</div>
		<div class="app_page_box" style="top: 40px;">
			<div class="app_page">
				<div class="order_list app_box_content_list app_list_box" v-for="item in orderData">

					<div class="app_box_flex">
						<div class="app_box_content_left C4">
							{{$common.getTimes(item.apo_create_time,'shifen')}}
						</div>
						<div class="app_box_content_right" style="color: #0fd004;" v-if="item.apo_status == 0">
							未支付
						</div>
						<div class="app_box_content_right" style="color: #ff0000;" v-if="item.apo_status == 1 && item.apo_service_status == 0">
							待服务
						</div>
						<div class="app_box_content_right" style="color: #0fd004;" v-if="item.apo_status == 1 && item.apo_service_status == 1">
							已完成
						</div>
					</div>
					<div class="order_list_content">
						<div class="txt_img">
							<img :src="item.apo_product_image" />
							<span style="color: #0fd004;" v-if="item.apo_type == 1">新购订单</span>
							<span style="color: #0fd004;" v-if="item.apo_type == 2">正常购买</span>
							<span style="color: #0fd004;" v-if="item.apo_type == 3">续费订单</span>
						</div>
						<div class="order_list_info order_info_list C4">
							<div class="app_box_flex">
								<div class="text_left">
									订单号：{{item.apo_no}}
								</div>
								<div class="text_right app_box_flex_1" style="color: #FBD415;">
									¥{{item.apo_real_pay}}
								</div>
							</div>
							<div class="app_box_flex">
								<div class="text_left">
									姓名：{{item.apo_contact}}
								</div>
								<div class="text_right app_box_flex_1">
									×{{item.apo_school_count}}
								</div>
							</div>
							<div class="app_box_flex">
								<div class="text_left">
									电话：{{item.apo_phone}}
								</div>
								<div class="text_right app_box_flex_1" v-if="item.apo_status == 1 && item.apo_service_status == 0" @click="orderProcessing(item.apo_id)">
									<div class="app_float_right">
										点击处理
									</div>
								</div>
							</div>
							<div class="app_box_flex">
								<div class="text_left">
									校区：{{item.schoolName}}
								</div>
							</div>
						</div>
					</div>
					<!--<div class="order_list_time C4 T3">
						<span class="app_float_left">开户订单</span>
					</div>-->
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	export default {

		data() {
			return {

			};
		},
		computed: {
			...mapState({
				   orderData : state => state.OrderListModule.orderData,
                tempSellAll: state => state.HomeModule.tempSellAll,
			})
		},
		mounted() {

			this.initData();

		},
		methods: {

			//  ...mapMutations(["ShopIndexModule/updateIsShopGuide"]),
			initData() {
				
            	var isRoot = '';   
                if (this.tempSellAll.u_master_osid != undefined && this.tempSellAll.u_master_osid != null && this.tempSellAll.u_master_osid != '') {
                	isRoot = ''
                    + "/u_id/" + this.tempSellAll.u_id
                    + "/os_id/" + this.tempSellAll.u_master_osid
                    + "/is_manager/" + this.tempSellAll.u_is_manager 
                    + "/u_type/" + this.tempSellAll.u_type 
                    + "/u_leader/" + this.tempSellAll.u_leader;
            	}else{
            		isRoot = ''
                    + "/u_id/" + this.$userData.getUID()
                    + "/os_id/" + this.$userData.getOsid()
                    + "/is_manager/" + this.$userData.getIsManager() 
                    + "/u_type/" + this.$userData.getOsType() 
                    + "/u_leader/" + this.$userData.getLeader();
            	}
            	
				this.$easyUtil.startLoading(this);
				this.$http.getHttp(
						this.$API.apiCustomerOrders + isRoot,
						rs => {
							this.$easyUtil.endLoading(this);
							console.log(rs);
							this.$store.commit("OrderListModule/updateOrderData", rs.orderList);
						}
				);
			},
			orderProcessing(id){
				this.$easyUtil.GO(this, '/orderDetail',{order_id:id})
			},
		}
	};
</script>

<style lang="stylus" scoped>
	@import '~PUBLIC_CSS';
	.search_box {
		line-height: 40px;
		background: #fff;
		margin-bottom: 5px;
		text-align: center;
		display: flex;
		align-items: center;
	}
	
	.search_box .screen {
		flex: 0.2;
	}
	
	.search_box input {
		flex: 3;
		border-radius: 100px;
		border: 0;
		background: #f4f4f4;
		padding: 5px 10px;
	}
	
	.search_box .search {
		flex: 1;
		color: #FBD415;
	}
	
	.order_list {
		overflow: hidden;
	}
	
	.order_list .order_list_info {
		float: initial;
	}
	
	.order_list .order_list_time {
		overflow: hidden;
		width: 100%;
	}
	
	.order_list .app_float_right {
		border: 1px solid #fbd415;
		padding: 0 10px 2px;
		line-height: initial;
		border-radius: 4px;
	}
	
	.order_list_content {
		overflow: hidden;
		display: flex;
	}
	
	.order_list_content .txt_img {
		text-align: center;
		padding-right: 10px;
	}
	
	.order_list_content .txt_img img {
		display: block;
		height: 70px;
		width: 70px;
		flex: initial;
		object-fit: cover;
	}
	
	.order_list_content .order_info_list {
		flex: 1;
	}
	
	.order_list_content .order_info_list .app_box_flex {
		line-height: 24px;
	}
	
	.app_box_flex .text_left {
		text-align: left;
	}
	
	.app_box_flex .text_right {
		text-align: right;
	}
</style>